<!doctype html>
<html>
    <head>
        <title>账户余额</title>
        <script src="static/js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script src="static/js/axios.min.js" type="application/javascript" charset="UTF-8"></script>
        <script src="static/js/md5.js" type="application/javascript" charset="UTF-8"></script>
        <script src="static/js/json2.js" type="application/javascript" charset="UTF-8"></script>
        <script src="static/js/crypto-js.js" type="application/javascript" charset="UTF-8"></script>
        <script src="static/js/common.js" type="application/javascript" charset="UTF-8"></script>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
        <!-- 引入 WeUI CDN 链接 -->
        <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.3.0/weui.min.css" />
    </head>

    <body>
        <div id="app">
            <div class="weui-navbar" style="align-items: center;">
                <div style="padding-left: 1rem;" @click="back()">返回</div>
                <div class="weui-navbar__item" style="position: initial;">
                    账户余额
                </div>
                <div style="padding-right: 1rem;" @click="withdraw()">提现</div>
            </div>
            <div class="top_view">
                <div style="opacity: 0.8;">
                    余额：<label> {{cash}}</label> 元
                </div>
            </div>
            <div class="page_bd" v-if="list.length>0">
                <div class="weui-cells__title">余额明细</div>
                <div class="weui-cells">
                    <div class="weui-cell" v-for="(item,index) in list" :key="index">
                        <div style="display: flex;flex-direction: column;font-size: 0.75rem;width: 100%;">
                            <label style="max-width: 80%;">{{item.title}}</label>
                            <div style="display: flex;justify-content: space-between;margin-top: 0.5rem;width: 100%;">
                                <label style="font-size: 0.6875rem;color: #666666;">{{getTime(item.createtime)}}</label>
                                <label style="color: #06ae56;" v-if="item.type == 0">{{item.value}} 元</label>
                                <label style="color: crimson;" v-else>{{item.value/100}} 元</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="weui-loadmore weui-loadmore_line">
                    <span class="weui-loadmore__tips" @click="loadmore()">{{loadingTexts[loadingi]}}</span>
                </div>
            </div>

        </div>
        <script type="application/javascript">
            var app = new Vue({
                el: '#app',
                data: {
                    cash: 0,
                    list: [],
                    param: {
                        index: 1,
                        size: 20
                    },
                    loadingTexts:['点击加载更多','没有更多了','暂无数据'],
                    loadingi:2
                },
                methods: {
                    withdraw: function() {
                        window.location.href = 'withdraw.html'
                        // window.location.href = 'http://127.0.0.1:8080/cash/withdraw'
                    },
                    getLastInfo: function() {
                        var self = this
                        axios.post('http://127.0.0.1:8080/api/cash/get_bank_info', '', {
                                headers: {
                                    "UserID": '1982474',
                                    "wechat": "wechat"
                                }
                            })
                            .then(function(response) {
                                let res = JSON.parse(JSON.stringify(response.data))
                                if (res.result == 0) {
                                    self.cash = res.data.cash
                                }
                                console.log(res)
                            })
                            .catch(function(error) {
                                console.log(error);
                            });
                    },
                    getList: function() {
                        var self = this
                        var data = JSON.stringify(self.param)
                        console.log(data)
                        data = wb_des(JSON.parse(data), '1982474', true);
                        axios.post('http://127.0.0.1:8080/api/refund/applist', data['data'], {
                                headers: data['key']
                            })
                            .then(function(response) {
                                let res = JSON.parse(JSON.stringify(response.data))
                                if (res.result == 0) {
                                    if (self.param.index == 1) {
                                        self.list = res.list
                                    } else {
                                        self.list = self.list.concat(res.list)
                                    }
                                    if(res.list.length == self.param.size){
                                        self.loadingi = 0
                                    }else{
                                        if(self.list.length == 0){
                                            self.loadingi = 2
                                        }else{
                                            self.loadingi = 1
                                        }
                                    }
                                } else {
                                    self.param.index-=1
                                }
                                console.log(res)
                            })
                            .catch(function(error) {
                                self.param.index-=1
                                console.log(error);
                                alert('请求出错')
                            });
                    },
                    loadmore:function(){
                        if(this.loadingi==0){
                            this.param.index+=1
                            this.getList()
                        }
                    },
                    back: function() {
                        window.history.go(-1);
                    },
                    getTime: function(time) {
                        let date = new Date(time)
                        return date.getFullYear() + '-' + this.handystr((date.getMonth() + 1)) + '-' + this
                            .handystr(date.getDate()) + ' ' + this.handystr(date.getHours()) + ':' + this.handystr(
                                date.getMinutes())
                    },
                    handystr: function(num) {
                        var str = num + ''
                        if (str.length == 1) {
                            str = '0' + str
                        }
                        return str
                    }
                }
            })
            app.getLastInfo()
            app.getList()
        </script>
    </body>
    <style>
        body {
            margin: 0rem;
            height: 100vh;
            background-color: #F7F7F7;
        }

        .top_view {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            background-color: #06ae56;
            margin: 1rem;
            border-radius: 0.3125rem;
            height: 6.25rem;
            color: white;
            font-size: 1.375rem;
            padding: 1rem;
        }
    </style>
</html>
